<template>
	<scroll-view class="order-tab" :scroll-x="true" :scroll-into-view="tab_id" :scroll-with-animation	="true">
		<view :id="'tab_id'+key" :class="key == tab_index ? 'order-tab-item acitve' : 'order-tab-item'" v-for="(item,key) in tabs" @tap="changeState(key)">{{item}}</view>
		<view class="tab-line" :style="'left:'+(160 * tab_index + 48)+'upx'"></view>
	</scroll-view>
</template>

<script>
	export default{
		props:{start_state:{}},
		data(){
			return {
				tabs:['全部','待付款','待发货','待收货','已完成','已取消','售后中','已售后'],
				tab_index : 0,
				tab_id : 'tab0'
			}
		},
		mounted() {
			this.tab_index = this.start_state;
		},
		methods:{
			changeState(key){
				this.tab_index = key;
				this.tab_id = 'tab_id'+key;
				console.log(this.tab_id);
				this.$emit('change-state',key)
			},
		}
	}
</script>

<style>
	.order-tab{
		position: fixed;
		width: 100%;
		height:90upx;
		line-height: 90upx;
		white-space: nowrap;
		background: #fff;
		z-index: 9;
		border-bottom: 2upx solid #E1E1E1;}
	.order-tab-item{
		display: inline-block;
		text-align: center;/* padding:0 30upx; */width: 140upx;
		color:#000;
		margin: 0 10upx;
		font-size: 36upx;}
	.order-tab .acitve{font-size: 36upx;color:#000; font-weight: bold;}
	.tab-line{position: absolute;width: 60upx;bottom: 0;height:8upx;background: #000;left:38upx;transition: all 0.1s linear; border-radius: 3upx;}
</style>
